<template>
    <div class="tabs">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="最热" name="first">最热</el-tab-pane>
            <el-tab-pane label="最新" name="second">最新</el-tab-pane>
            <el-tab-pane label="精选" name="third">精选</el-tab-pane>
            <!-- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style scoped>
.tabs {
    background-color: #fff;
}
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>